<?php
use tpfcore\Core;
?>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Set render engine for 360 browser -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- HTML5 shim for IE8 support of HTML5 elements -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
			</script>
		<![endif]-->
		<link href="{$admin_assets_path}/layui/css/layui.css" rel="stylesheet" />
		<link href="{$admin_assets_path}/css/theme.min.css" rel="stylesheet">
		<link href="{$admin_assets_path}/css/simplebootadmin.css" rel="stylesheet">
		<link href="{$admin_assets_path}/css/default.css" rel="stylesheet" />
		<link href="{$admin_assets_path}/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<style>
			.length_3{width: 180px;} form .input-order{margin-bottom: 0px;padding:3px;width:40px;}
			.table-actions{margin-top: 5px; margin-bottom: 5px;padding:0px;} .table-list{margin-bottom:
			0px;}
			.table-label label{display: inline-block;}
		    #goods_imgs{overflow: hidden; text-align: center;}
		    #goods_imgs img{width: 100%; height: auto;max-height: 120px; }
		    #goods_imgs .item{width: 120px;float: left; border:1px #eaeaea solid; padding: 4px; margin-right:10px; margin-bottom: 10px; height: 170px;}
		    #goods_imgs .item a:nth-child(2){display: block; height: 120px;line-height: 120px;}
		    #goods_imgs input{width: 100%; box-sizing: border-box; height: 30px;}
		</style>
		<!--[if IE 7]>
			<link rel="stylesheet" href="{$admin_assets_path}/css/font-awesome-ie7.min.css">
		<![endif]-->
		<script type="text/javascript">
			//全局变量
			var GV = {
				WEB_ROOT:"",
				DIMAUB: "/",
				JS_ROOT: "/theme/backend/assets/js/",
				TOKEN: ""
			};
		</script>
		<!-- Le javascript==================================================-
		-> <!-- Placed at the end of the document so the pages load faster -->
		<script src="{$admin_assets_path}/js/jquery.js"></script>
		<script src="{$admin_assets_path}/js/wind.js"></script>
		<script src="{$admin_assets_path}/js/bootstrap.min.js"></script>
		<link href="{$admin_assets_path}/kindeditor/themes/default/default.css" rel="stylesheet"/>
		<script src="{$admin_assets_path}/kindeditor/kindeditor-min.js"></script>
		<script src="{$admin_assets_path}/kindeditor/lang/zh_CN.js"></script>
		<script src="{$admin_assets_path}/layui/layui.all.js"></script>
		<script>
			var layer = layui.layer;
			var editor,upload_limit_num={:config('config.posts_images_upload_limit')};
			KindEditor.ready(function(K) {
				var uploadbutton = K.uploadbutton({
					button : K('#uploadButton')[0],
					fieldName : 'imgFile',
					url : "{:url('cms/posts/upload')}",
					afterUpload : function(data) {
						if (data.code === 0) {
							var url = K.formatUrl(data.data[0], 'absolute');
							K('#thumb').val(url);
							$('#show_thumb').attr('src',url).show();
						} else {
							alert(data.msg);
						}
					},
					afterError : function(str) {
						alert('错误信息已打印到控制台');
						console.log(str);
					}
					});
					uploadbutton.fileBox.change(function(e) {
					uploadbutton.submit();
				});
				var editor = K.editor({
		            allowFileManager : true,
		            dirName : 'data/uploads',
		            uploadJson:'{:Core::addons_url("kindeditor://Editor/pictureUpload")}',
		            fileManagerJson:'{:url("Kindeditor/Kindeditor/file_manage")}'
		        });
				K('#uploadButtonImages').click(function() {
					if($("#goods_imgs .item").length>=upload_limit_num){
						layer.msg("最多只能添加{:config('config.posts_images_upload_limit')}张图片", {icon: 2});
						return false;	
					} 
		            editor.loadPlugin('image', function() {
		                editor.plugin.imageDialog({
		                    viewType : 'LIST',
		                    dirName : 'data/uploads',
		                    clickFn : function(url, title, width, height, border, align) {
		                        editor.hideDialog();
		                        var item = $("#item_tpl").find(".item").clone();
		                        item.find("img").attr("src",url);
		                        item.find(".url").val(url);
		                        item.find(".desc").val(title);
		                        $("#goods_imgs").append(item);
		                        remove();
		                    }
		                });
		            });
		        });
		        K('#multUploadButtonImages').click(function() {
		        	if($("#goods_imgs .item").length>=upload_limit_num){
						layer.msg("最多只能添加{:config('config.posts_images_upload_limit')}张图片", {icon: 2});
						return false;	
					}
		            editor.loadPlugin('multiimage', function() {
		                editor.plugin.multiImageDialog({
		                    clickFn : function(urlList) {
		                        editor.hideDialog();
		                        K.each(urlList, function(i, data) {
		                        	if($("#goods_imgs .item").length>=upload_limit_num){
										layer.msg("最多只能添加{:config('config.posts_images_upload_limit')}张图片", {icon: 2});
										return false;	
									} 
		                            console.log(data);
		                            var item = $("#item_tpl").find(".item").clone();
		                            item.find("img").attr("src",data.img_url);
		                            item.find(".url").val(data.img_url);
		                            $("#goods_imgs").append(item);
		                            remove();
		                        });
		                    }
		                });
		            });
		        });
			});
		</script>
	</head>
	<body>
		<div class="wrap">
		<ul class="nav nav-tabs">
			<li class="active"><a href="#A" data-toggle="tab">基本信息</a></li>
			<li><a href="#B" data-toggle="tab">图片集</a></li>
			<li><a href="#C" data-toggle="tab">图片内容</a></li>
			<li style="float: right;"><a href="{:url('cms/PostsImages/index')}">图片列表</a></li>
		</ul>

		<form method="post" class="form-horizontal js-ajax-form" action="">
			<input type="hidden" name="channel" value="2">
			<fieldset>
                <div class="tabbable">
                    <div class="tab-content">
                        <div class="tab-pane active" id="A">
							<fieldset>
								<div class=""> 
									<table class="table table-bordered"> 
										<tbody>
											<tr> 
												<th width="80">标题</th> 
												<td> 
													<input type="text" style="width: 400px;" name="title" id="title" value="" placeholder="请输入标题"> <span class="form-required">*</span> 
												</td> 
											</tr>
											<tr>
												<th>所属分类</th> 
												<td>
													<select name="cateid">
														<option value="0">选择分类</option>
														{$categorys|default=""}
													</select>
													<span class="form-required"> *</span> 
												</td> 
											</tr>
											<tr> 
												<th width="80">标签</th> 
												<td> 
													<input type="text" style="width: 400px;" name="tag" id="tag" value="" placeholder="请输入标签，英文逗号','分隔"> <span class="form-required"> </span> 
												</td> 
											</tr>
											<tr> 
												<th width="80">缩略图</th> 
												<td> 
													<input class="ke-input-text" type="text" id="thumb" value="" name='thumb'/> 
													<input type="button" id="uploadButton" value="上传缩略图" />
													<img src="" style="width:50px;height:50px; display:none;" id="show_thumb"/>
													<span class="form-required"></span>
												</td> 
											</tr>  
											<tr> 
												<th>添加时间</th> 
												<td><input type="text" name="datetime" value="{:date('Y-m-d H:i',time())}" class="js-datetime date" style="width: 200px"></td> 
											</tr> 
											<tr>
												<th>文章来源</th> 
												<td><input type="text" name="source" value="{:config('config.articel_default_source')}" style="width: 200px" placeholder="文章来源"></td> 
											</tr> 
											<tr>
												<th>作者</th> 
												<td><input type="text" name="author" value="{:config('config.articel_default_author')}" style="width: 200px" placeholder="文章作者"></td> 
											</tr> 
											<tr>
												<th>浏览量</th> 
												<td>
													<input type="text" name="view" value="{:rand(10,9999)}" style="width:200px" placeholder="">
												</td> 
											</tr>
										</tbody>
									</table> 
								</div>
							</fieldset>
						</div>
						<div class="tab-pane" id="B">
                            <fieldset>
                                <div class="control-group">
                                    <div id="goods_imgs">
                                        
                                    </div>
                                    <div style="text-align: center;">
                                        <div>最多能上传{:config('config.posts_images_upload_limit')}张图片</div>
                                        <input type="button" id="uploadButtonImages" value="单张图片上传" />
                                        <input type="button" id="multUploadButtonImages" value="批量上传图片" />
                                    </div>
                                </div>
                            </fieldset>
                            <div style="display: none;" id="item_tpl">
                                <div class="item">
                                    <a href="javascript:;" class="remove">[-]</a>
                                    <a href="#" target="_blank"><img src=""></a>
                                    <input type="text" class="desc" name="desc[]" placeholder="图片描述" />
                                    <input type="hidden" class="url" name="url[]"/>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="C">
							<fieldset>
								<div class=""> 
									<table class="table table-bordered"> 
										<tbody>
											<tr>
												<th>摘要</th> 
												<td>
													<textarea style="width: 700px; height:50px;" placeholder="图片集摘要，200字以内" name="abstract"></textarea>
													<span class="form-required"> 文章摘要，默认取文章内容前100长度</span>
												</td> 
											</tr>
											<tr> 
												<th>内容</th> 
												<td>
													{:Core::hook('ueditor',['name'=>'content','width'=>'100%','height'=>'','default_str'=>'','toolbars'=>''])}
												</td> 
											</tr>  
										</tbody>
									</table> 
								</div>
							</fieldset>
						</div>
					</div>
				</div>
				<div class="form-actions">
					<button class="btn btn-primary js-ajax-button" type="button">确定操作</button>
					<a class="btn" href="javascript:history.back(-1);">返回</a>
				</div>
			</fieldset>
		</form>
	</div>
	<script src="{$admin_assets_path}/js/common.js"></script>
	<script type="text/javascript">
    $("#goods_imgs .remove-img").click(function(){
        $this = $(this);
        if(confirm("你确定要删除该图片吗")){
            $.ajax({
                type:"post",
                data:{"id":$(this).attr("data-id")},
                dataType:"json",
                url:"{:url('cms/PostsImages/del_imgae')}",
                success:function(data){
                    if(data.code == 0){  // 成功
                        layer.msg(data.msg, {icon: 1});
                        $this.parent().remove();
                    }else{
                        layer.msg(data.msg, {icon: 2});
                    }
                }
            });
        }
    });

    function remove(){
        $("#goods_imgs .remove").unbind("click").click(function(){
            var $this=$(this);
            var url = $(this).parent().find("img").attr("src");
            if(confirm("你确定要删除该图片吗")){
                $.ajax({
                    type:"post",
                    data:{"url":url},
                    dataType:"json",
                    url:"{:url('cms/PostsImages/del_imgae')}",
                    success:function(data){
                        if(data.code == 0){  // 成功
                            layer.msg(data.msg, {icon: 1}); 
                            $this.parent().remove();
                        }else{
                            layer.msg(data.msg, {icon: 2});
                        }
                    }
                });
            }
        });
    }
    remove();
    </script>
	</body>
</html>